<template>
    <div class="MeetingCode">
        <div class="header"><img class="return_img" src="@/assets/Return.png" style="width:.23rem;height:.4rem;" v-on:click="back()">兴威华天酒店预订单</div>
        <div class="content">
            <div class="code">
                <p class="title">参会嘉宾可扫二维码，查看会议须知</p>
                <p class="code_img">
                    <img class="left" :src="codeImg " alt="" style="width:3.06rem;height:3.06rem;">
                </p>
                <div class="footer">
                    <x-button type="primary" @click.native="met_btn" class="btn met_btn">会议须知预览</x-button>  
                    <x-button type="primary" @click.native="onItemClick" class="btn">立即分享</x-button>  
                </div>                
            </div>
        </div> 
        <div v-transfer-dom>
          <x-dialog v-model="showDialogStyle" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '100%', 'background-color': 'transparent'}">
            <div style="color:#fff;text-align:center;height:100%;" @click="showDialogStyle = false">
              <div class="content">
                  <p  class="tishi"><img src="@/assets/tishi.png" alt="" style="width:3rem"></p>
                  <p style="font-size:.48rem">请点击右上角分享</p>
              </div>
            </div>
          </x-dialog>
        </div>       
    </div>
</template>
<script>
import { XButton, XDialog, TransferDomDirective as TransferDom } from "vux";
import { getMeetingPublish, getMeetingOrderCode } from "@/service/meeting.js";
import { format } from "@/service/util.js";
import axios from "axios";
import wx from "weixin-js-sdk";
export default {
  directives: {
    TransferDom
  },
  components: { XButton, XDialog },
  data() {
    return {
      codeImg: "",
      showDialogStyle: false,
      format: format,
      mOrderId: "",
      endTime: "",
      startTime: "",
      address: "",
      theme: ""
    };
  },
  created() {
    this.mOrderId = sessionStorage.getItem("mOrderId");
  },
  mounted() {
    this._getMeetingPublish();
    this._getMeetingOrderCode();
  },
  methods: {
    _getMeetingOrderCode() {
      var data = {
        mOrderId: this.mOrderId
      };
      getMeetingOrderCode(data).then(res => {
        this.theme = res.data.theme;
        this.codeImg = res.data.codeImg;
        this.startTime = res.data.startTime;
        this.endTime = res.data.endTime;
        this.address = res.data.address;
        this.wechat();
      });
    },
    //必须先调会议须知接口才能调code接口
    _getMeetingPublish() {
      var data = {
        mOrderId: this.mOrderId
      };
      getMeetingPublish(data).then(res => {
        this.publish = res.data.publish;
        localStorage.setItem("publish", JSON.stringify(this.publish));
        // this.map();
      });
    },
    myrefresh() {
      window.location.reload();
    },
    met_btn() {
      sessionStorage.setItem("mOrderId", this.mOrderId);
      this.$router.push("/my/Meeting/Notice");
    },
    back() {
      // this.$router.go(-1); //返回上一层
      this.$router.push({
        path: "/my/Meeting/Meeting_Details",
        query: { id: this.mOrderId }
      });
    },
    onItemClick(value, disabled) {
      this.showDialogStyle = true;
    },
    wechat() {
      var url = window.location.href;
      var mOrderId = this.mOrderId;
      axios.post("/recommend/getPriceAgreement?url=" + url).then(res => {
        var startTime = format(this.startTime, "yyyy-MM-dd");
        var companyName = this.address;
        let links =
          "http://staff.ihotelvip.com/my/Meeting/MeetingCode_two?id=" +
          this.mOrderId; //分享出去的链接
        let title = '会议须知:' + this.theme; //分享的标题
        let desc = `扫码查看${startTime}${companyName}会议预定`; //分享的详情介绍
        wx.config({
          debug: false,
          appId: "wx9a16008c72a9cf50",
          timestamp: res.data.timestamp,
          nonceStr: res.data.nonceStr,
          signature: res.data.qm,
          jsApiList: [
            "onMenuShareTimeline",
            "onMenuShareAppMessage",
            "onMenuShareQQ",
            "onMenuShareWeibo"
          ]
        });
        //直接调用
        wx.ready(function() {
          //分享给好友
          wx.onMenuShareAppMessage({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: "http://img.ihotelvip.com/1544419746942", // 分享图标
            success: function() {
              // 分享纪录
              alert("成功分享给朋友");
            },
            cancel: function() {
              // alert("分享失败,您取消了分享!");
            }
          });
          wx.onMenuShareTimeline({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: "http://img.ihotelvip.com/1544419746942", // 分享图标
            success: function() {
              // 分享纪录
              alert("成功分享给朋友");
            },
            cancel: function() {
              //alert("分享失败,您取消了分享!");
            }
          });
          wx.onMenuShareQQ({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: "http://img.ihotelvip.com/1544419746942", // 分享图标
            success: function() {
              // 分享纪录
              alert("成功分享给朋友");
            },
            cancel: function() {
              //alert("分享失败,您取消了分享!");
            }
          });
          wx.onMenuShareWeibo({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: "http://img.ihotelvip.com/1544419746942", // 分享图标
            success: function() {
              // 分享纪录
              alert("成功分享给朋友");
              //logUtil.printLog("分享给朋友成功返回的信息为:",res);
            },
            cancel: function() {
              //alert("分享失败,您取消了分享!");
            }
          });
        });
        //失败回调
        wx.error(function(res) {
          // alert("失败");
        });
      });
    }
  }
};
</script>

<style scoped lang="less">
.MeetingCode {
  .header {
    height: 0.88rem;
  }
  .content {
    width: 100%;
    height: 12.06rem;
    // background-image: linear-gradient(top, #983ba5, #d363e1);
    background:linear-gradient(180deg,rgba(166,116,66,1),rgba(206,156,107,1));
    padding-top: 0.7rem;
    .code {
      background: url(../../../assets/QrCode.png) no-repeat;
      background-size: 100%;
      width: 7rem;
      height: 10.64rem;
      margin: 0 auto;
      padding-top: 1.28rem;
      .title {
        width: 5.72rem;
        height: 0.36rem;
        font-size: 0.35rem;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(42, 42, 42, 1);
        line-height: 0.48rem;
        margin: 0 auto;
      }
      .code_img {
        width: 3.06rem;
        height: 3.06rem;
        margin: 0 auto;
        margin-top: 2.01rem;
      }
      .footer {
        margin-top: 2.23rem;
        padding: 0 0.3rem;
        .met_btn {
          margin-right: 0.3rem;
        }
        .btn {
          width: 3rem;
          height: 0.8rem;
          line-height: 0.8rem;
          background: #A67442 !important;
          border-radius: 0.4rem !important;
          display: inline-block;
        }
      }
    }
  }
}
</style>
